<template>
  <div class="page-header-index-wide">
    <a-card>
      <a-row :gutter="24">
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
          <chart-card :loading="loadings" title="总充值" :imageUrl=redImage iconType="pay-circle">
            <div slot="total">
              <span style="font-size: 30px">￥{{indexInfo.totalAmount}}</span>
            </div>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
          <chart-card :loading="loadings" title="今日充值" :imageUrl=yellowImage iconType="pay-circle">
            <div slot="total">
              <span style="font-size: 30px">￥{{indexInfo.todayAmount}}</span>
            </div>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
          <chart-card :loading="loadings" title="总用户" :imageUrl=blueImage iconType="user">
            <div slot="total">
              <span style="font-size: 30px">{{indexInfo.totalUserNum}}</span>
              <span>个</span>
            </div>
            <div slot="context">
              <div>男用户{{indexInfo.manNum}}个</div>
              <div>女用户{{indexInfo.womanNum}}个</div>
            </div>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
          <chart-card :loading="loadings" title="今日新增" :imageUrl=greenImage iconType="user">
            <div slot="total">
              <span style="font-size: 30px">{{indexInfo.todayTotalUserNum}}</span>
              <span>个</span>
            </div>
            <div slot="context">
              <div>男用户{{indexInfo.todayManNum}}个</div>
              <div>女用户{{indexInfo.todayWomanNum}}个</div>
            </div>
          </chart-card>
        </a-col>
      </a-row>

      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :sm="24" :md="12" :xl="12">
          <a-card title="男女比例" :bordered="false">
            <pie title="男女比例" :dataSource="pieData" height="400"/>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <a-card title="日活跃人数" :bordered="false">
            <line-chart-multid :dataSource="chartDataList" :fields="chartFields" :aliases="chartAliases" title="人数" :height="400"/>
          </a-card>

        </a-col>
      </a-row>
    </a-card>

  </div>
</template>

<script>

  import ChartCard from './NumberCard'
  import Pie from '@/components/chart/Pie'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import { getAction } from '@/api/manage'

  export default {
    name: "IndexChart",
    components: {
      ChartCard,
      Pie,
      LineChartMultid
    },
    data() {
      return {
        loadings: false,
        yellowImage: require('@/assets/background/yellow1.jpg'),
        blueImage: require('@/assets/background/blue1.jpg'),
        greenImage: require('@/assets/background/green1.jpg'),
        redImage: require('@/assets/background/red1.jpg'),
        indexInfo:{},
        pieData:[],
        chartDataList:[],
        chartFields:['manNum','womanNum','totalNum'],
        chartAliases:[{field:'manNum',alias:'男'}, {field:'womanNum',alias:'女'}, {field:'totalNum',alias:'总人数'}],
      }
    },
    created() {
      this.getIndexInfo();
    },
    methods: {
      getIndexInfo(){
        this.loadings=true;
        getAction("/system/xySystemDailyActivity/getIndexData",{}).then((res)=>{
          if(res.success){
            this.indexInfo=res.result;
            //饼图数据
            var manNum = res.result.manNum
            var womanNum = res.result.womanNum
            var data = [
              {item: '男', count: manNum},
              {item: '女', count: womanNum}
            ]
            this.pieData=data;
            //条形统计图数据
            this.chartDataList=res.result.chartDataList;
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.loadings=false;
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>